<!--
 * @Author: pjji
 * @describe: 入口页
 * @LastEditTime: 2020-12-07 15:19:22
-->
<template>
  <div class="layout-wrap">
    <el-container>
      <el-header>
        <customHeader :userInfo="userInfo" @logOut="logOut" />
      </el-header>
      <el-container>
        <el-aside width="160px">
          <customNavMenu />
        </el-aside>
        <el-main>
          <div
            class="layout-main"
            ref="layoutMain"
            :style="{ height: clientHeight + 'px' }"
            id="app"
          >
            <keep-alive>
              <router-view v-if="$route.meta.keepAlive" />
            </keep-alive>
            <router-view v-if="!$route.meta.keepAlive" />
          </div>
          <Footer />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import customHeader from "@comp/common/header";
import Footer from "@comp/common/footer";
import customNavMenu from "@comp/common/navMenu";
export default {
  components: {
    customHeader,
    Footer,
    customNavMenu,
  },
  data() {
    return {
      clientHeight: 400,
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo,
    }),
  },
  methods: {
    ...mapActions(["getUserInfo", "getNavMenuData", "logOut"]),
    // 更新视图高度
    updateClientHeight() {
      this.$nextTick(() => {
        this.clientHeight = $(window).height() - 110;
        this.$refs.layoutMain.style.height = this.clientHeight + "px";
      });
    },
    /**
     * @name: 统一设置cookie
     * @msg: 用于开发联调时, 自由设置cookie项
     * @param {*}
     * @return {*}
     */
    setCookie() {
      if (process.env.NODE_ENV === "development") {
        this.$cookies.set(
          "JSESSIONID",
          "604AAD05EE552ACBEA3025574E80B4F4"
        ); //setCookie
      }
    },
  },
  created() {
    this.setCookie();
    this.getUserInfo();
    this.getNavMenuData();
    this.$nextTick(() => {
      this.updateClientHeight();
    });
    window.onresize = () => {
      this.$nextTick(() => {
        this.updateClientHeight();
      });
    };
  },
};
</script>

<style lang="scss" scoped>
body {
  // 解决elment 弹出层 页面抖动问题
  padding-right: 0 !important;
  background: $grey-bg;
}
.layout-wrap {
  background: $grey-bg;
  height: 100%;
  overflow: hidden;
  :deep(.el-container) {
    height: 100%;
  }
  :deep(.el-header) {
    padding: 0;
    height: $headerHeight !important;
  }
  :deep(.el-aside) {
    background: $content-bg;
    height: 100%;
    overflow-y: auto;
    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      background-color: #317fff;
      background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
      );
    }
    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #ededed;
      border-radius: 10px;
    }
  }
  .layout-main {
    // margin-bottom: 60px;
    padding: 10px;
    height: 100%;
    overflow-y: auto;
    background: $content-bg;
  }
  :deep(.el-main) {
    // padding-bottom: 0;
    height: 100%;
    overflow: hidden;
    padding: 10px;
  }
  :deep(.el-footer) {
    position: absolute;
    bottom: 0;
    height: $footerHeight !important;
    width: 100%;
    background: $content-bg;
  }
}
.el-message__content {
  line-height: 24px !important;
}
</style>

